.card-body-empty {
	flex: 1;
}

.cashier-row {
	align-items: flex-start !important;
	height: calc(100% - 60px);
	background-color: #f3f4f6;
	border-radius: 4px;

	.cashier-card {
		border-right: 1px solid $m-border-color;
		min-width: 300px;
	}

	.cashier-goods {
	}

	.cashier-col {
		display: flex;
		flex-direction: column;
		height: 100%;

		.card-title {
			height: 50px;
			display: flex;
			flex-flow: row;
			justify-content: space-between;
			align-items: center;
			background-color: $m-primary-light;
			padding: 0 24px;
		}

		.card-body {
			text-align: center;
			flex: 1;
			border: solid 1px $m-border-color;
			overflow-y: auto;
			display: flex;
			flex-flow: column;
			background: $m-white-color;

			.cashier-tabs {
				height: 50px;
				display: flex;
				flex-flow: row;
				border: 1px solid $m-border-color;
				border-bottom: 2px solid $m-border-color;
				border-radius: 4px 4px 0 0;
				box-sizing: border-box;
				margin-bottom: 16px;

				.tabs-item {
					padding: 3px 30px;
					box-sizing: border-box;
					line-height: 40px;
					display: inline-block;
					list-style: none;
					font-weight: 500;
					color: $m-main-color;
					cursor: pointer;
				}

				.tabs-item:hover {
					transition: opacity 0.2s linear;
					background: rgba(24, 144, 255, 0.1);
					color: $m-primary;
				}

				.tabs-item.active {
					transition: opacity 1s linear;
					border-bottom: $m-primary;
					background: rgba(24, 144, 255, 0.1);
					color: $m-primary;
					z-index: 1;
				}
			}

			.cell-item {
				display: flex;
				flex-flow: column;
			}

			.cell-item-body {
				padding: 0 20px;
			}

			.cell-item-spu,
			.cell-item-price {
				display: flex;
				flex-flow: row;
				justify-content: space-between;
			}

			.cell-item-price {
				margin-top: 12px;
			}

			.spu-info {
				.spu-name {
					line-height: 25px;
					font-weight: 400;
					color: $m-main-color;
				}

				.spu-unit {
					font-size: 14px;
					line-height: 25px;
					font-weight: 200;
					color: $m-disabled-color;
				}
			}

			.spu-delete {
				padding: 6px 0 6px 6px;
				color: $m-warning;
			}

			.spu-line {
				margin-top: 14px;
				height: 2px;
				width: 100%;
				background: #f2f2f2;
				border: none;
			}

			.spu-category {
				display: flex;
				flex-flow: row;
				overflow-y: auto;
				background: #f2f2f2;

				.spu-category-list {
					display: flex;
					flex-flow: column;

					.category-item {
						padding: 0 32px;
						box-sizing: border-box;
						line-height: 40px;
						list-style: none;
						font-weight: 500;
						color: $m-main-color;
						cursor: pointer;
						transition: opacity 10s linear;
					}

					.category-item:hover {
						transition: opacity 0.2s linear;
						color: $m-primary;
					}

					.category-item.active {
						background: $m-white-color;
						color: $m-primary;
						z-index: 1;
					}
				}
			}
		}

		.card-sumarry {
			background: $m-white-color;
			height: 90px;

			.detail-list {
				margin: 0 16px;
				display: flex;
				flex-flow: column;
				justify-content: space-evenly;
				height: 100%;
			}

			.detail-item {
				display: flex;
				flex-flow: row;
				justify-content: space-between;
				align-items: center;
				font-weight: 200;
			}

			.preferential {
				.amount span {
					color: $m-error;
				}
			}

			.payable {
				.amount span {
					font-size: 22px;
				}
			}
		}

		.card-footer {
			display: flex;
			flex-flow: row;
			flex-wrap: wrap;
			justify-content: space-between;
			align-items: center;
			background-color: $m-white-color;
			z-index: 1;
			border-top: 1px solid $m-border-color;
			padding: 12px 16px;

			.footer-item {
				display: flex;
				flex-flow: row;
				align-items: center;

				.btn-submit {
					padding: 12px 24px;
				}
			}
		}
	}
}

.popup-hang-list {
	width: 500px;
	overflow: auto;

	.popup-hang-title {
		padding: 20px;
		color: $m-main-color;
		font-weight: 500;
	}

	.popup-hang-content {
		.hang-item-title {
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.hang-item-content {
			display: flex;
			flex-flow: column;

			.header {
				display: flex;
				flex-flow: column;
				padding: 8px;

				.total {
					display: flex;
					flex-flow: row;
					align-items: center;
					justify-content: space-between;
					padding: 0 16px;

					.expand-total-text {
						line-height: 26px;
					}

					.expand-total-btn {
					}
				}

				.remark {
				}
			}

			.content {
				padding: 8px;

				/deep/ .u-cell:last-child .u-line {
					display: none;
				}

				.cell-item {
					display: flex;
					flex-flow: column;
					padding: 0 20px;
				}

				.cell-item-spu,
				.cell-item-price {
					display: flex;
					flex-flow: row;
					justify-content: space-between;
				}
			}
		}
	}
}

.u-popup__content {
	max-height: 80%;
}

.u-modal,
.u-modal__content {
	flex: 1;
	overflow: hidden;
}

.slot-content {
	width: 100%;
	height: 100%;
	overflow: hidden;

	.footer.btn {
		display: flex;
		flex-flow: row;
		align-items: center;
		justify-content: space-around;
	}
}

.slot-modal {
	.header {
		display: flex;
		justify-content: center;
	}

	.footer {
		display: flex;
		align-items: center;
		justify-content: center;
	}
}

.payment {
	/deep/ .u-fade-enter-active,
	/deep/ .u-fade-zoom-enter-active {
		z-index: 1 !important;
	}
}

.pay-type {
	.body {
		margin: 16px 0;

		.pay-list {
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 8px;
		}

		.pay-item {
			cursor: pointer;
			width: 100%;
			height: 100%;
			border: 1px solid $m-border-color;
			border-radius: 4px;
			background: $m-white-color;
			display: flex;
			flex-flow: column;
			justify-content: center;
			align-items: center;
			transition: transform 0.2s cubic-bezier(0.32, 0.08, 0.24, 1);
			box-shadow: 0 1px 3px $m-shadow-color;
		}

		.pay-item:hover {
			backdrop-filter: blur(15px) saturate(0.9) brightness(1.4);
		}
		.pay-item.active {
			color: $m-primary;
			border: 1px solid $m-primary;
			backdrop-filter: blur(15px) saturate(0.9) brightness(1.4);
		}

		.scan-pay {
			display: flex;
			flex-flow: column;
			align-items: center;
			justify-content: center;

			.text {
				color: $m-main-color;
				padding-top: 32px;
			}
		}
	}
}

.grid-body {
	overflow-y: auto;
	padding: 6px;

	.grid-item {
		width: 100%;
		height: 100%;

		.grid-item-content {
			margin: 4px;
			border: 1.5px solid $m-border-color;
			backdrop-filter: blur(50px) saturate(130%);
			border-radius: 4px;
			transition: 400ms 200ms cubic-bezier(0.9, 0, 0.1, 1), transform 200ms;
		}
		.grid-item-flex {
			cursor: pointer;
			display: flex;
			flex-flow: row;
		}

		.item-img {
			display: flex;
			flex-flow: row;
			align-items: center;
			margin: 8px;

			.img {
				border: solid 1px $m-border-color;
				border-radius: 4px;
				display: flex;
				flex-flow: row;
				align-items: center;
				justify-content: center;
			}
		}

		.item-text {
			padding: 8px 8px 8px 0;
			display: flex;
			flex-flow: column;
			justify-content: space-around;
			overflow: hidden;

			.name {
				font-weight: 400;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				text-shadow: 2px 2px 4px $m-shadow-color;
			}

			.specs1 {
				display: flex;
				flex-flow: row;
				margin-top: 5px;
				font-size: 16px;
				color: $m-primary-disabled;
			}

			.specs {
				padding: 2px 5px;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				border: 0.8px solid $m-primary-disabled;
				border-radius: 3px;
				padding: 2px 5px;
			}

			.amount {
				color: $m-main-color;

				.reference-amount {
					font-size: 20px;
					color: $m-warning;
				}
			}
		}
	}
}

.default-body {
	.grid-default-item {
		width: 90%;
		height: 60px;
		display: flex;
		flex-flow: row;
		justify-content: center;
		align-items: center;
		border: solid 1px $m-border-color;
		margin: 4px 0;
		backdrop-filter: blur(50px) saturate(130%);
		border-radius: 4px;
		transition: 400ms 200ms cubic-bezier(0.9, 0, 0.1, 1), transform 200ms;
		border: 1.5px solid $m-border-color;
		cursor: pointer;
		.name {
			font-weight: 400;
			text-shadow: 2px 2px 4px $m-border-color;
		}
	}
}

.member-info {
	margin: 8px;

	.item {
		display: flex;
		flex-flow: row;
		align-items: center;
	}
}

.grid-time-card-body,
.select-time-card-body {
	overflow-y: auto;
	height: 100%;

	.grid-time-card-item {
		display: flex;
		flex-flow: column;
		border-radius: 5px;
		padding: 4px 0;
		margin: 4px 0;
		background: $m-bg-color;

		.time-card-header {
			display: flex;
			flex-flow: row;
			align-items: center;
			justify-content: space-between;
			padding: 6px 12px;
			border-bottom: 1px solid $m-border-color;
		}

		.time-card-body {
			display: flex;
			flex-flow: column;
			align-items: center;
			justify-content: space-around;
		}

		.item-text {
			padding: 12px;
			justify-content: space-around;

			.text {
				display: flex;
				flex-flow: row;
				align-items: center;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
		}
	}
}

.select-time-card-body {
	.grid-time-card-item.active {
		background: #f3f4f6;
		border: 1px solid $m-error;
	}
}
